<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <h1>拦截器练习</h1>
    <input type="text" id="ipt">
    <button id="btn">提交</button>
    <button id="btn2">取消请求</button>

    <script>
        // 拦截器加取消练习
        function quxiao() {
            const myAxios = axios.create({
                baseURL: "/",
                timeout: 10000,
                headers: {}
            })
            //1 拿到一个取消请求的对象
            const CancelToken = axios.CancelToken
            let cancel = null;
            // 请求拦截器
            myAxios.interceptors.request.use((confing) => {
                // 在发送亲求之前做些什么
                // 1获取token,并让请求头携带token
                const token = "lkhsdalkhjflsa.asdasfadsfdasf.asfasfasdfasdf";
                // 给请求体添加token属性
                confing.headers.token = token
                return confing
            }, (err) => {
                // 如果请求错误则返回一个失败的promise实例，错误信息会给到catch处理
                return Promise.reject(error)
            })

            // 响应拦截器
            myAxios.interceptors.response.use((response) => {
                // 对请求道的结果进行处理，只拿正确的信息，如果错误的信息直接交给异常处理
                if (response.data.code !== 10000) {
                    return Promise.reject(response.data.msg)
                }
                // 第一个data是完整的响应体第二个为响应体里面的数据
                return response.data.data
            }, (error) => {
                // 失败返回失败的promise实例值为错误信息
                return Promise.reject(error)
            })

            const oIpt = document.getElementById('ipt')
            const oBtn = document.getElementById('btn')
            const oBtn2 = document.getElementById('btn2')

            // 点击发送ajax
            oBtn.onclick = async function () {
                const iptValue = oIpt.value;
                // console.log(iptValue);
                try {
                    const re = await myAxios.get('/user', {
                        params: {
                            userId: iptValue
                        },
                        //2 在配置对象中配置一个cancelToken的配置项,值是实例化的CancelToken对象
                        cancelToken: new CancelToken((c) => {
                            //当请求发送的时候,这个回调函数会被执行,并接受一个参数,这个参数其实就是取消当前请求的函数
                            //   3 将取消请求的函数赋值给全局对象cancal再点击的时候调用
                            cancel = c
                        })
                    })
                    console.log(re);
                } catch (e) {
                    console.log('错误', e.message);
                }
            }

            oBtn2.onclick = () => {
                cancel()
            }
        }
        quxiao()
    </script>
</body>

</html>